import React, {useState} from "react";
import {useEdit, useHandle} from "@/common/hooks";
import SysMenu, {SysMenuTree} from "@/api/sys-menu";
import {Form, Space} from "antd";
import HButton from "@/components/ant-ext/HButton";
import HFormItem from "@/components/ant-ext/HFormItem";
import {InnerPath, MenuType, Stat} from "@/const/const";
import GetSelectNode, {HSearchTree} from "@/components/ant-ext/HSearchTree";
import "./index.less"
import IconSelect from "@/components/common/IconSelect";
import {DropHandle} from "@/components/ant-ext/HSearchTreeExtDropHandle";
import HAction from "@/components/common/HAction";
import {HNotification} from "@/config/route/route-func";

type Context = {
    disable: boolean,
    iconVisible: boolean,
    pathVisible: boolean,
}

export default function Index() {
    const [treeData, setTreeData] = useState<SysMenuTree[]>([]);
    const [loading, setLoading] = useState(false)
    const [editLoading, setEditLoading] = useState(false)
    const [currentNode, setCurrentNode] = useState<SysMenuTree>()

    const [context, setContext] = useState<Context>({
        disable: true,
        iconVisible: false,
        pathVisible: false,
    })

    const [form] = Form.useForm();

    const reload = useHandle(() => SysMenu.selectTree({setLoading, success: setTreeData}), [])

    const saveAndFlush = useEdit(SysMenu.doEdit, {
        setLoading: setEditLoading,
        success: () => {
            form.resetFields(["menuCode", "menuName"])
            reload()
        }
    })
    
    const reloadForm = useHandle(() => {
        switch (Number(form.getFieldValue("type"))) {
            case 1:
                setContext({...context, iconVisible: false, pathVisible: true})
                form.setFieldValue("icon", undefined)
                break
            case 2:
                setContext({...context, iconVisible: true, pathVisible: true})
                break
            case 3:
                setContext({...context, iconVisible: false, pathVisible: false})
                form.setFieldsValue({"icon": undefined, "path": undefined, "element": undefined})
                break
        }
    }, [context, form])


    const layout = {
        form: form
    }
    return (<div className="parent">
        <div className={"searchSelect"}>
            <Space style={{marginBottom: "10px"}}>
                <HButton type={"primary"} onClick={() => {
                    form.resetFields()
                    form.setFieldValue("pCode", "ROOT")
                    setContext({...context, disable: false})
                    setCurrentNode(undefined)
                }}> 添加一级节点</HButton>
                <HButton onClick={() => {
                    if (currentNode) {
                        setCurrentNode(undefined)
                        setContext({...context, disable: false})
                        form.resetFields()
                        // form.setFieldValue("pCode", currentNode.key)
                    } else {
                        HNotification.warning({message: "请先选择父级菜单"})
                    }
                }}> 添加子节点</HButton>
                <HAction action={(setLoading) => {
                    // SysMenu.doResort({setLoading, success: reload})
                }}> 顺序重编</HAction>
            </Space>

        </div>
        <div className={"menuForm"}>
            <Form name={"submitForm"} labelCol={{sm: 6}} form={form} onFinish={() => {
                saveAndFlush({body: form.getFieldsValue()})
            }}>
                <HFormItem {...layout} label={"父级节点"} name={"pCode"} disabled={true}/>

                <HFormItem {...layout} label={"编码"} name={"menuCode"} disabled={context.disable} required={true}/>

                <HFormItem {...layout} label={"名称"} name={"menuName"} required={true}/>

                <HFormItem {...layout} label={"地址"} hidden={!context.pathVisible} name={"path"}/>

                <HFormItem {...layout} label={"组件"} hidden={!context.pathVisible} name={"element"}/>

                <HFormItem {...layout} label={"图标"} hidden={!context.iconVisible} name={"icon"}>
                    <IconSelect dataSource={[]} placeholder={"请选择图标"}/>
                </HFormItem>

                <HFormItem {...layout} label={"类型"} name={"type"} type={"radio"} dataSource={MenuType.select}
                           initialValue={2} onChange={reloadForm}/>

                <HFormItem {...layout} label={"状态"} name={"stat"} type={"radio"} dataSource={Stat.select}
                           required={true}
                           initialValue={true}/>

                <HFormItem {...layout} label={"内部标识"} name={"inner"} type={"radio"} dataSource={InnerPath.select}
                           initialValue={true}/>


                <HFormItem {...layout} label={"授权接口"} name={"url"} placeholder={"(英文逗号分隔)"} type={"textarea"}
                           rows={6}/>


                <Space style={{marginLeft: "200px"}}>
                    <HButton loading={editLoading} type={"primary"} onClick={form.submit}>保存 </HButton>
                    {/* <HAction disabled={currentNode === undefined} confirm={{
                        title: "是否删除[" + currentNode?.title + "]",
                        ok: (setLoading) => {
                            SysMenu.deleteById({
                                body: {code: currentNode?.key}, setLoading: setLoading, success: () => {
                                    setCurrentNode(undefined)
                                    reload()
                                    form.resetFields()
                                }
                            })
                        },
                    }}
                    >
                        删除
                    </HAction> */}

                </Space>

            </Form>
        </div>
    </div>);
};
